<template>
    <div class="menu"
        :class="`mode-${settings.themeMode}`">
        <div
            class="menu-logo"
            :style="{ height: `${base.headerHeight}px` }"
        >
            <router-link class="logo" to="/home">
                <img src="@/assets/images/common/logo.png" height="40px" alt="logo" />
                <transition name="fade" mode="out-in">
                    <span v-if="!settings.menusCollapse" class="title">Vue Alain</span>
                </transition>
            </router-link>
        </div>
        <div class="menu-content" :style="menuContentStyle">
            <el-scrollbar v-if="isAsideFixed" class="menu-content-scrollbar">
                <MenuMain :collapse="settings.menusCollapse" v-bind="menuAttrs"></MenuMain>
            </el-scrollbar>
            <div v-else>
                <MenuMain :collapse="settings.menusCollapse" v-bind="menuAttrs"></MenuMain>
            </div>
        </div>
        
        <div v-if="collapse" class="menu-collapse" @click="toggleMenusCollapse">
            <font-icon :iconName="settings.menusCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'" :size="20"></font-icon>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import MenuMain from './menu.vue';
import { themeGroup } from '@/components/themeMode/theme.js';
const themeMap = {};
themeGroup.forEach(item => {
    themeMap[item.value] = item.color
})

const MENUTHEME = {
    dark: {
        backgroundColor: themeMap.dark,
        textColor: "#FFFFFF",
        activeTextColor: "#FFFF01",
    },
    bright: {
        backgroundColor: themeMap.bright,
        textColor: "#303133",
        activeTextColor: "#409EFF",
    },
    blue: {
        backgroundColor: themeMap.blue,
        textColor: "#FFFFFF",
        activeTextColor: "#FFFF01",
    },
    lightDark: {
        backgroundColor: themeMap.lightDark,
        textColor: "#FFFFFF",
        activeTextColor: "#FFFF01",
    }
}

export default {
    components: {
        MenuMain
    },
    props: {
        collapse: Boolean
    },
    computed: {
        ...mapState(['base', 'settings']),
        isAsideFixed () {
            const { asideMode } = this.settings
            return asideMode === 'left-fixed'
        },
        isHeaderScroll () {
            const { headerMode } = this.settings
            return headerMode === 'top'
        },
        menuContentStyle() {
            return {
                height: this.collapse ? `calc(100% - 40px - ${this.base.headerHeight}px)` : `calc(100% - ${this.base.headerHeight}px)`
            }
        },
        menuAttrs() {
            const { themeMode } = this.settings;
            if(themeMode && MENUTHEME[themeMode]) {
                return MENUTHEME[themeMode]
            } else {
                return MENUTHEME['dark']
            }
        },
    },
    methods: {
        toggleMenusCollapse() {
            this.$store.dispatch('changeSettings', {key: 'menusCollapse', value: !this.settings.menusCollapse})
        },
    }
}
</script>

<style scoped lang="scss">
@import '~@/assets/styles/theme-color.scss';

$menu-border-color: #EBEEF5;

.menu{
    height: 100%;
    transition: .3s;
    box-sizing: border-box;
    border-right: 1px solid $theme-dark-color;
    background-color: $theme-dark-color;
    &.mode-dark{
        background-color: $theme-dark-color;
        border-right-color: $theme-dark-color;
        color: #FFFFFF;
        .menu-collapse{
            color: #FFFFFF;
        }
    }
    &.mode-bright{
        background-color: $theme-bright-color;
        border-right-color: $menu-border-color;
        color: #303133;
        .menu-collapse{
            color: #303133;
        }
    }
    &.mode-blue{
        background-color: $theme-blue-color;
        border-right-color: $menu-border-color;
        color: #FFFFFF;
        .menu-collapse{
            color: #FFFFFF;
        }
    }
    &.mode-lightDark{
        background-color: $theme-lightDark-color;
        border-right-color: $theme-lightDark-color;
        color: #ffffff;
        /deep/.el-dropdown{
            color: #ffffff;
        }
    }


    .menu-content{
        height: 100%;
        /deep/.menu-content-scrollbar{
            height: 100%;
            .el-scrollbar__wrap{
                overflow-x: hidden!important;
            }
        }
    }
    .menu-nav{
        border-right: none;
    }
    .menu-collapse{
        height: 40px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        cursor: pointer;
        background: rgba(0,0,0,0.2);
    }
    .menu-logo {
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        background-size: cover;
        color: inherit;
        .logo{
            display: flex;
            align-items: center;
            color: inherit;
            img{
                vertical-align: middle;
            }
            .title{
                font-size: 28px;
                white-space: nowrap;
            }
        }
    }
}

/deep/ .el-menu--collapse{
    .menu-node .menu-node-text {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
    }
}
</style>